<template>
  <div class="diyImg flex" v-if="data">
    <formImg height="70" v-model="data.img" @pickImg="pickImg(1)" />
    <formImg height="70" v-model="data.img1" @pickImg="pickImg(2)" />
    <div class="v1">
      <div class="v2 flex">
        <el-input
          v-model.trim="data.text"
          clearable
          type="text"
          placeholder="备用可选字段，如：名称"
        ></el-input>
        <el-input
          v-model.trim="data.other"
          clearable
          type="text"
          placeholder="备用可选字段：other"
        ></el-input>
      </div>
      <div class="v2 flex">
        <el-input
          v-model.trim="data.url"
          clearable
          type="text"
          placeholder="备用可选字段，如：链接"
        ></el-input>
        <el-input
          v-model.trim="data.jump"
          clearable
          type="text"
          placeholder="备用可选字段，如：跳转方式"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { formImg } from "@/components/formImg";
const emit = defineEmits<{
  (e: "pickImg", index: number): void; //向父组件传递 需要选择图片
}>();

interface IProps {
  data: any;
}
const props = withDefaults(defineProps<IProps>(), {
  data: () => null,
});

function pickImg(index: number) {
  emit("pickImg", index);
}
</script>

<style lang="scss" scoped>
.diyImg {
  flex: 1;
  .el-input {
    flex: 1;
  }
  .v1 {
    flex: 1;
  }
  .v2 {
    &:last-child {
      margin-top: 5px;
    }
    .el-input {
      margin-right: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
